<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <title>教学视频管理</title>
        <include file='Layout:ins_css' />
        <link rel="stylesheet" href="__VENDOR__/laydate/theme/default/laydate.css">
        <style type="text/css">
            #addBtn {
                float: right;
                margin: -7px -6px 9px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>教学视频管理</h5>
                            <button class="btn btn-primary" id="addBtn">新增</button>
                        </div>
                        <div class="row s-row">
                            <div class="col-sm-12">
                                <div class="price-div">
                                    <form class="form-horizontal">
                                        <div class="form-group cyf-form-group">
                                            <div class="col-sm-4" style="margin-top: 10px; margin-bottom: 10px">
                                                <label style="float: left" class="col-sm-4 control-label cvbnm">教学方案:</label>
                                                <select class="form-control col-sm-" id="teachermethod_id" name="" style="min-height: 35px">
                                                    <option value="0">全部</option>
                                                    <volist name="teachermethod_info" id="vo">
                                                        <option value="{$vo.id}">{$vo.me_name}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                            <div class="col-sm-4" style="margin-top: 10px; margin-bottom: 10px">
                                                <label style="float: left" class="col-sm-4 control-label cvbnm">章:</label>
                                                <select class="form-control col-sm-" id="chapter_id" name="" style="min-height: 35px">
                                                    <option value="0">全部</option>
                                                    <volist name="chapter_info" id="vo">
                                                        <option value="{$vo.cha_id}" pid="{$vo.tme_id}" style="display: none">{$vo.cha_name}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                            <div class="col-sm-4" style="margin-top: 10px; margin-bottom: 10px">
                                                <label style="float: left" class="col-sm-4 control-label cvbnm">节:</label>
                                                <select class="form-control col-sm-" id="section_id" name="section_id" style="min-height: 35px">
                                                    <option value="0">全部</option>
                                                    <volist name="section_info" id="vo">
                                                        <option value="{$vo.sec_id}" pid="{$vo.cha_id}" style="display: none">{$vo.sec_name}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-striped table-bordered table-hover dataTables-example" id="RuleTable">
                                <thead>
                                    <tr>
                                        <th  width="16%">视频编号</th>
                                        <th  width="16%">视频名称</th>
                                        <th  width="16%">所属节</th>
                                        <th  width="16%">节内序号</th>
                                        <th  width="16%">视频长度</th>
                                        <th  width="20%">操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 添加视频信息-->
        <div class="modal fade" id="AdVedioModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增视频</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="form_add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">教学方案:</label>
                                <select class="form-control col-sm- poiu" id="tme_boss_add" name="tme_boss_add" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="teachermethod_info" id="vo">
                                        <option value="{$vo.id}">{$vo.me_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">章:</label>
                                <select class="form-control col-sm- poiu" id="cha_boos_add" name="cha_boos_add" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="chapter_info" id="vo">
                                        <option value="{$vo.cha_id}" pid="{$vo.tme_id}" style="display: none">{$vo.cha_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">节:</label>
                                <select class="form-control col-sm- poiu" id="sec_boss_add" name="sec_boss_add" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="section_info" id="vo">
                                        <option value="{$vo.sec_id}" pid="{$vo.cha_id}" style="display: none">{$vo.sec_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <!--<div class="form-group">-->
                                <!--<label class="col-sm-3 control-label">视频编号</label>-->
                                <!--<div class="col-sm-7">-->
                                    <!--<input type="text" readonly="readonly" id="add_vid_id" name="add_vid_id" class="form-control removeData">-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频名称</label>
                                <div class="col-sm-7">
                                    <input type="text" id="add_vid_name" name="add_vid_name" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频长度</label>
                                <div class="col-sm-7">
                                    <input type="text" id="add_vid_long" name="add_vid_long" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频文件</label>
                                <div class="col-sm-7">
                                    <input class="file form-control" name="add_upload_file" id="add_upload_file" type="file" data-show-caption="true" multiple />
                                </div>
                                <input name="add_file_name" id="add_file_name" type="text" style="display: none" />
                                <input name="add_file_uuid" id="add_file_uuid" type="text" style="display: none" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="add_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 编辑视频信息-->
        <div class="modal fade" id="EdVedioModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">新增视频</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="form_edit">
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">教学方案:</label>
                                <select class="form-control col-sm- poiu" id="tme_boss_edit" name="tme_boss_edit" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="teachermethod_info" id="vo">
                                        <option value="{$vo.id}">{$vo.me_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">章:</label>
                                <select class="form-control col-sm- poiu" id="cha_boos_edit" name="cha_boos_edit" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="chapter_info" id="vo">
                                        <option value="{$vo.cha_id}" pid="{$vo.tme_id}" style="display: none">{$vo.cha_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label cvbnm nationality">节:</label>
                                <select class="form-control col-sm- poiu" id="sec_boss_edit" name="sec_boss_edit" style="min-height: 35px">
                                    <option value="0">全部</option>
                                    <volist name="section_info" id="vo">
                                        <option value="{$vo.sec_id}" pid="{$vo.cha_id}" style="display: none">{$vo.sec_name}</option>
                                    </volist>
                                </select>
                            </div>
                            <div class="hidden">
                                <label class="col-sm-3 control-label">视频编号</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly="readonly" id="edit_vid_id" name="edit_vid_id" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频名称</label>
                                <div class="col-sm-7">
                                    <input type="text" id="edit_vid_name" name="edit_vid_name" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频长度</label>
                                <div class="col-sm-7">
                                    <input type="text" id="edit_vid_long" name="edit_vid_long" class="form-control removeData">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="edit_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal 更换视频-->
        <div class="modal fade" id="ChanegeVedioModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">更换视频</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="form_change">
                            <div class="hidden">
                                <label class="col-sm-3 control-label">视频编号</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly="readonly" id="change_vid_id" name="change_vid_id" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频名称</label>
                                <div class="col-sm-7">
                                    <input type="text" readonly="readonly" id="change_vid_name" name="change_vid_name" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频长度</label>
                                <div class="col-sm-7">
                                    <input type="text" id="change_vid_long" name="change_vid_long" class="form-control removeData">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">视频文件</label>
                                <div class="col-sm-7">
                                    <input class="file form-control" name="change_upload_file" id="change_upload_file" type="file" data-show-caption="true" multiple />
                                </div>
                                <input name="change_file_name" id="change_file_name" type="text" style="display: none" />
                                <input name="change_file_uuid" id="change_file_uuid" type="text" style="display: none" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="change_btn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <include file='Layout:ins_js' />
        <script type="text/javascript" src="__VENDOR__/fileinput/fileinput.min.js"></script>
        <script type="text/javascript" src="__VENDOR__/fileinput/locales/zh.js"></script>
        <script type="text/javascript" src="__VENDOR__/laydate/laydate.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //自检
                check_index();

                sTable = $(".table").DataTable({
                    "fnServerParams": function(aoData) {
                        aoData.push({
                            'name': 'sec_id',
                            'value': $('select#section_id option:selected').val()
                        });
                    },
                    "bAutoWidth":false,
                    "oLanguage": {
                        "sLengthMenu": "每页 _MENU_ ",
                        "sProcessing": "处理中...",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    },
                    "sAjaxSource": "__URL__/medthod_video_manage_ShowDatatables", //调用php后台接口方法地址
                    "aoColumns": [{
                        'data': 'vid_id'
                    },{
                        'data': 'vid_name'
                    },{
                        'data': 'sec_name'
                    },{
                        'data': 'order'
                    },{
                        'data': 'vid_long'
                    },{
                        "data": null,
                        orderable: false,
                        render: function(data, type, row, meta) {
                            return '<a type="button" class="btn btn-success" href="#" onclick=editFromID(this) >编辑</a>|<a type="button" class="btn btn-info" href="#" onclick=changeFromID(this) >更换视频</a>|<a type="button" class="btn btn-danger" href="#" onclick=delFromID(this) >删除</a>'
                        }
                    }]
                });
                laydate.render({
                        elem: '#add_vid_long',
                        type: 'time'
                });
                laydate.render({
                    elem: '#edit_vid_long',
                    type: 'time'
                });
                laydate.render({
                    elem: '#change_vid_long',
                    type: 'time'
                });

            });
            //查询按钮
            $("select#teachermethod_id").change(function() {
                //console.log( $('select#college_id option:selected').val());
                var p_id = $("#teachermethod_id").val();
                $("#chapter_id option").hide();
                $('#chapter_id').val('0');
                $('#chapter_id option[pid=' + p_id + ']').show();
            });
            $("select#chapter_id").change(function() {
                //console.log( $('select#college_id option:selected').val());
                var p_id = $("#chapter_id").val();
                $("#section_id option").hide();
                $('#section_id').val('0');
                $('#section_id option[pid=' + p_id + ']').show();
            });
            $("select#section_id").change(function(){
                sTable.ajax.reload();
            });
            <!--------------   新增模态框相关     !----------------->
            //新增模态框 - 学院 选择事件-
            $('select#tme_boss_add').change(function () {
                var p_id = $("#tme_boss_add").val();
                $("#cha_boos_add option").hide();
                $('#cha_boos_add').val('0');
                $('#cha_boos_add option[pid=' + p_id + ']').show();
            });
            $('select#cha_boos_add').change(function () {
                var p_id = $("#cha_boos_add").val();
                $("#sec_boss_add option").hide();
                $('#sec_boss_add').val('0');
                $('#sec_boss_add option[pid=' + p_id + ']').show();
            });
            //新增
            $('#addBtn').on('click', function() {
                $('.wrapper').removeClass('animated');
                $('#AdVedioModal').modal();
            });
            // 上传
            $("#add_upload_file").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "__URL__/uploadVideo", //上传的地址
                allowedFileExtensions: ['mov','mp4','wav'], //接收的文件后缀
                autoReplace: true,
                browseLabel: '上传文件',
                uploadAsync: false, //默认异步上传
                showUpload: false, //是否显示上传按钮
                showRemove: false, //显示移除按钮
                showPreview: false, //是否显示预览
                showCaption: false, //是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true, //是否显示拖拽区域
                maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                previewClass: 'previewPanel',
                //initialPreview: [
                //"<img src='__ROOT__/Uploads/Upload_brands/" + urlImg + " ' class='file-preview-image' />",
                //],
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

            });
            //同步上传成功结果处理
            $('#add_upload_file').on('filebatchuploadsuccess', function(event, data, previewId, index) {
                $('#add_file_name').val(data.response.info.filename);
                $('#add_file_uuid').val(data.response.info.uuid);
            });
            $('#add_btn').on('click',function () {
                $('#add_upload_file').fileinput('upload').on('filebatchuploadsuccess',function (event,data) {
                    if(data.response.state){
                        var formData = $('#form_add').serializeArray();
                        var postData = {};
                        $(formData).each(function(i) {
                            postData[this.name] = this.value;
                        });
                        sil_loading();
                        $.ajax({
                            type: "post",
                            url: "__URL__/add_video",
                            async: true,
                            data: postData,
                            dataType: 'json',
                            success: function(p) {
                                if(p.state) {
                                    toastr.success(p.info);
                                    $("#AdVedioModal").modal('hide');
                                    sTable.ajax.reload();
                                } else {
                                    toastr.warning(p.info);
                                }
                                sil_reloading();
                            }
                        });
                    }
                });
            });
            <!--------------   编辑模态框相关     !----------------->
            //编辑模态框 - 学院 选择事件-
            $('select#tme_boss_edit').change(function () {
                var p_id = $("#tme_boss_edit").val();
                $("#cha_boos_edit option").hide();
                $('#cha_boos_edit').val('0');
                $('#cha_boos_edit option[pid=' + p_id + ']').show();
            });
            $('select#cha_boos_edit').change(function () {
                var p_id = $("#cha_boos_edit").val();
                $("#sec_boss_edit option").hide();
                $('#sec_boss_edit').val('0');
                $('#sec_boss_edit option[pid=' + p_id + ']').show();
            });
            //编辑模态框弹出
            function editFromID(obj) {
                var Obj = $(obj).parent().parent();
                var rowdata = sTable.row(Obj).data();
                $('#tme_boss_edit').val(rowdata.tme_id);
                $('#cha_boos_edit').val(rowdata.cha_id);
                $('#sec_boss_edit').val(rowdata.sec_id);
                $('#edit_vid_id').val(rowdata.vid_id);
                $('#edit_vid_name').val(rowdata.vid_name);
                $('#edit_vid_long').val(rowdata.vid_long);
                $("#EdVedioModal").modal();
            }
            $("#edit_btn").on('click', function() {
                var formData = $('#form_edit').serializeArray();
                var postData = {};

                $(formData).each(function(i) {
                    postData[this.name] = this.value;
                });
                sil_loading();
                $.ajax({
                    type: "post",
                    url: "__URL__/edit_video",
                    async: true,
                    data: postData,
                    dataType: 'json',
                    success: function(p) {
                        if(p.state) {
                            toastr.success(p.info);
                            $("#EdVedioModal").modal('hide');
                            sTable.ajax.reload();
                        } else {
                            toastr.warning(p.info);
                        }
                        sil_reloading();
                    }
                });
            });
            <!--------------   删除模态框相关     !----------------->
            function delFromID(obj) {
                var Obj = $(obj).parent().parent();
                var rowdata = sTable.row(Obj).data();
                swal({
                    title: '提示',
                    text: "确定要删除吗?",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function(isConfirm) {
                    if(isConfirm) {
                        $.ajax({
                            type: "post",
                            url: "__URL__/delete_student",
                            async: true,
                            data: {
                                delete_student_id: rowdata.stu_id,
                            },
                            dataType: 'json',
                            success: function(p) {
                                toastr.success(p.info);
                                sTable.ajax.reload();
                            }
                        })
                    }
                });
            }
            <!--------------   更换视频模态框相关     !----------------->
            function changeFromID(obj) {
                var Obj = $(obj).parent().parent();
                var rowdata = sTable.row(Obj).data();
                $('#change_vid_id').val(rowdata.vid_id);
                $('#change_vid_name').val(rowdata.vid_name);
                $("#ChanegeVedioModal").modal();
            }
            // 上传
            $("#change_upload_file").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "__URL__/changeUploadVideo", //上传的地址
                allowedFileExtensions: ['mov','mp4','wav'], //接收的文件后缀
                autoReplace: true,
                browseLabel: '上传文件',
                uploadAsync: false, //默认异步上传
                showUpload: false, //是否显示上传按钮
                showRemove: false, //显示移除按钮
                showPreview: false, //是否显示预览
                showCaption: false, //是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true, //是否显示拖拽区域
                maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                previewClass: 'previewPanel',
                //initialPreview: [
                //"<img src='__ROOT__/Uploads/Upload_brands/" + urlImg + " ' class='file-preview-image' />",
                //],
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

            });
            //同步上传成功结果处理
            $('#change_upload_file').on('filebatchuploadsuccess', function(event, data, previewId, index) {
                $('#change_file_name').val(data.response.info.filename);
                $('#change_file_uuid').val(data.response.info.uuid);
            });
            $('#change_btn').on('click',function () {
                $('#change_upload_file').fileinput('upload').on('filebatchuploadsuccess',function (event,data) {
                    if(data.response.state){
                        var formData = $('#form_change').serializeArray();
                        var postData = {};
                        $(formData).each(function(i) {
                            postData[this.name] = this.value;
                        });
                        sil_loading();
                        $.ajax({
                            type: "post",
                            url: "__URL__/change_video",
                            async: true,
                            data: postData,
                            dataType: 'json',
                            success: function(p) {
                                if(p.state) {
                                    toastr.success(p.info);
                                    $("#ChanegeVedioModal").modal('hide');
                                    sTable.ajax.reload();
                                } else {
                                    toastr.warning(p.info);
                                }
                                sil_reloading();
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>